<template>
  <div class="user-left">
    <div class="user-header">
      <img class="lable" src="@/assets/images/userCenter/lable.png" />
      <div class="img-box">
        <img :src="userInfo.pic_url" v-if="userInfo.pic_url" />
        <img v-else src="@/assets/images/userCenter/header_img.png" />
      </div>
      <div class="header-nav">
        <p class="user-id">{{ userInfo.name }}</p>
        <el-upload border class="change-header" action="api/upload-img" name="file" list-type="picture"
          :headers="myHeaders" :show-file-list="false" :on-success="onSuccess"
          accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" :limit="1" :before-upload="beforeAvatarUpload">
          更换头像
        </el-upload>
      </div>
    </div>
    <div class="tabs">
      <div class="list-item" v-for="item in titleList" :key="item.title"
        :class="item.link_addr == $route.name ? 'active' : ''" @click="changeTab(item)">
        <img class="default" :src="item.image" alt="" />
        <img class="show" :src="item.image_show" alt="" />
        {{ item.title }}
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :show-close=false :close-on-press-escape=false
      :close-on-click-modal=false>
      <span>您的账号密码近90天未修改，请立即修改！</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="goChangePassword">去修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    mapGetters,
    mapActions,
    mapMutations
  } from "vuex";
  export default {
    name: "CommonHeader",
    props: {},
    data() {
      return {
        dialogVisible: false,
        myHeaders: {
          Accept: "application/json",
          Authorization: "Bearer  " + localStorage.getItem("token")
        },
        titleList: [{
            link_addr: "user-center",
            title: "信息预览",
            image: require("@/assets/images/userCenter/icon_1.png"),
            image_show: require("@/assets/images/userCenter/icon_show_1.png"),
          },
          {
            link_addr: "company-info",
            title: "完善公司信息",
            image: require("@/assets/images/userCenter/icon_2.png"),
            image_show: require("@/assets/images/userCenter/icon_show_2.png"),
          },
          {
            link_addr: "team-info",
            title: "完善团队信息",
            image: require("@/assets/images/userCenter/icon_3.png"),
            image_show: require("@/assets/images/userCenter/icon_show_3.png"),
          },
          {
            link_addr: "project-info",
            title: "完善项目信息",
            image: require("@/assets/images/userCenter/icon_4.png"),
            image_show: require("@/assets/images/userCenter/icon_show_4.png"),
          },
          {
            link_addr: "upload-file",
            title: "材料上传",
            image: require("@/assets/images/userCenter/icon_6.png"),
            image_show: require("@/assets/images/userCenter/icon_show_6.png"),
          },
          {
            link_addr: "change-phone",
            title: "修改参赛账户手机号",
            image: require("@/assets/images/userCenter/icon_5.png"),
            image_show: require("@/assets/images/userCenter/icon_show_5.png"),
          },
        ],
      };
    },
    mounted() {
      // this.getUserInfo();
      if (localStorage.getItem('password_status') == 1 && !localStorage.getItem('password_status_message')) {
        localStorage.setItem('password_status_message', 1);
        this.$message({
          showClose: true,
          message: '您的账号密码近90天未修改，请及时修改！',
          type: 'warning',
          duration: 5000
        });
      } else if (localStorage.getItem('password_status') == 2) {
        this.dialogVisible = true;
      }

      if (this.$route.path == '/change-password') {
        this.dialogVisible = false;
      }
    },
    methods: {
      ...mapActions(["getUserInfo"]),
      changeTab(item) {
        if (localStorage.getItem('password_status') == 2) {
          this.$message({
            showClose: true,
            message: '您的账号密码近90天未修改，请立即修改！',
            type: 'warning'
          });
        } else {
          this.$router.push({
            name: item.link_addr,
          });
        }
      },
      onSuccess(res, file) {
        this.getUserInfo();
        // this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 5;
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 5MB!");
        }
        return isLt2M;
      },
      goChangePassword() {
        if (this.$route.path != '/change-password') {
          this.$router.push({
            name: 'change-password',
          });
        }
      }
    },
    computed: {
      ...mapGetters(["userInfo"]),
    },
  };
</script>
<style scoped>
  .user-left {
    width: 100%;
  }

  .user-header {
    background: #fff;
    box-sizing: border-box;
    padding: 27px;
    display: flex;
    padding-bottom: 60px;
    position: relative;
  }

  .lable {
    position: absolute;
    top: 0;
    right: 30px;
  }

  .img-box {
    width: 50px;
    height: 50px;
    background: #ededed;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 10px;
  }

  .img-box img {
    width: 50px;
    height: 50px;
  }

  .user-id {
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #4a5162;
  }

  .change-header {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #0b4696;
    cursor: pointer;
    margin-top: 5px;
  }

  .login-out:hover {
    background: #0e93e4;
    color: #fff;
  }

  .tabs {
    padding-top: 1px;
    background: #fff;
    min-height: 600px;
    width: 100%;
  }

  .list-item {
    height: 64px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #333333;
    line-height: 64px;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 40px;
    display: flex;
    align-items: center;
    margin: 10px 0;
  }

  .list-item.active,
  .list-item:hover {
    background: #f2f8ff;
    color: #0b4696;
  }

  .list-item img {
    width: 24px;
    height: 24px;
    margin-right: 15px;
  }

  .list-item .default {
    display: block;
  }

  .list-item .show {
    display: none;
  }

  .list-item.active .default,
  .list-item:hover .default {
    display: none;
  }

  .list-item.active .show,
  .list-item:hover .show {
    display: block;
  }
</style>
